<template>
	<view>
		<view class="status_bar" :style="{height:statusBarHeight+'px'}"></view>
		<uni-nav-bar backgroundColor="#2979ff" color="#fff" border="flase">
			<block slot="left">
				<view class="city" @click="leftclick()">
					<view>
						<text class="uni-nav-bar-text">{{ city }}</text>
					</view>
					<uni-icons type="down" color="#fff" size="18" />
				</view>
			</block>
			<view class="input-view">
				小树照相馆
			</view>
		</uni-nav-bar>
		<swiper indicator-dots='true' indicator-active-color="#5bc5fc" class="swiper-box">
			<swiper-item v-for="(item, index) in 3" :key="index">
				<view class="swiper-item" :class="'swiper-item' + index">
					<text style="color: #fff; font-size: 32px;">{{index+1}}</text>
				</view>
			</swiper-item>
		</swiper>
		<uni-section class="mb-10" title="拍摄项目" type="line"></uni-section>
		<view class="mainBox">
			<uni-row class="demo-uni-row" :gutter="20">
				<view class="shopBox">
					<uni-col :span="12" v-for="(item, index) in info" :key="index">
						<navigator url="/pages/index/detail">
							<view class="shop">
								<image class="shopimg" :src="item.url" mode="aspectFill"></image>
								<view class="name">{{item.content}}</view>
								<view class="size">尺寸:{{item.size}}</view>
								<view class="price">{{item.price}}</view>
								<view class="dingjin">预约订金:{{item.dingjin}}</view>
							</view>
						</navigator>
					</uni-col>
				</view>
			</uni-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				titleBarHeight: 0,
				city: '郑州',
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '结婚登记照',
						price: '￥199.00',
						dingjin: '￥49.00',
						size: '4*6厘米',

					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://p0.ssl.img.360kuai.com/t01736c309615e3dc19.jpg',
						content: '结婚登记照套餐',
						price: '￥199.00',
						dingjin: '￥49.00',
						size: '',
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://img.zcool.cn/community/01b99e5ec36a31a80120720079bf9d.jpg@2o.jpg',
						content: '生日照',
						price: '￥199.00',
						dingjin: '￥49.00',
						size: '4*6厘米',
					}
				],
			}
		},
		onReady() {
			let systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
		},
		onLoad() {
			if (uni.getStorageSync('uid'))
				this.API_storeList()
		},
		methods: {
			leftclick() {
				uni.navigateTo({
					url: '/pages/index/map'
				})
			},
			API_storeList() {
				var that = this;
				that.ran
					.request('index/Index/storeList', {})
					.then(res => {
						if (res.code == 0) {
							that.city = res.data[0].store_name;
						}
					});
			},
		}
	}
</script>

<style lang="scss">
	$nav-height: 30px;

	page {
		background: #f8f8f8;
	}

	.shopBox {
		width: 730rpx;
		margin-left: 20rpx;
		overflow: hidden;

		.shop {
			margin-bottom: 20rpx;
			overflow: hidden;
			border-radius: 14rpx;
			background: #fff;
			// margin-right: 20rpx;
			box-shadow: 1px 1px 6px #7588a2;
			line-height: 1.5;

			.shopimg {
				width: 100%;
				height: 350rpx;
				display: block;
				margin-bottom: 20rpx;
			}

			.size {
				padding: 4rpx 20rpx;
				font-size: 28rpx;
				color: #999;
			}

			.price {
				padding: 0 20rpx 20rpx;
				font-size: 28rpx;
				color: #2979ff;
			}

			.dingjin {
				border-top: 1px solid #dde9f7;
				padding: 14rpx 20rpx;
				color: #999;
				font-size: 26rpx;
			}

			.name {
				padding: 0 20rpx;
				font-weight: bold;
				// margin: 20rpx 0;
				font-size: 28rpx;
			}
		}

	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: 4px;
	}

	.input-view {

		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		text-align: center;
		margin: 7px 0;
		line-height: $nav-height;
	}

	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}

	.image {
		width: 750rpx;
	}
</style>